import React from 'react';

import { LogoutOutlined } from '@ant-design/icons';
import { ConnectProps } from '@/models/connect';
import styles from './index.less';
import { getUserInfo } from '@/utils/userInfo';
import SlsCompanyChannel from './SlsCompanyChannel';

import { Dropdown, Menu } from 'antd';
import ChangePasswordButton from '@/components/Button/change-password';
import LicenseInfoButton from '@/components/Button/license-info';
import { xhrGet, api } from '@/services';

import { history } from 'umi';
import { setCurrentUserInfo } from '@ey-utils/utils/local-storage';

export interface GlobalHeaderRightProps extends ConnectProps { }

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  // 退出
  logout = () => {
    xhrGet(api.logout).then(() => {
      setCurrentUserInfo({});
      sessionStorage.clear();
      history.push('/login');
    });
  };

  handleChangePasswordClick = () => { };

  renderOverlayMenu = () => {
    return (
      <Menu>
        <Menu.Item>
          <ChangePasswordButton />
        </Menu.Item>
        <Menu.Item>
          <LicenseInfoButton />
        </Menu.Item>
      </Menu>
    );
  };

  render() {
    const currentUser = getUserInfo();

    return (
      <span className={`${styles.action} ${styles.account}`}>
        <Dropdown overlay={this.renderOverlayMenu} placement="bottomLeft">
          <span className={styles.name}>{currentUser.name || ''}</span>
        </Dropdown>

        <SlsCompanyChannel />
        <span className={styles.logout} onClick={this.logout}>
          <LogoutOutlined />
        </span>
      </span>
    );
  }
}
export default AvatarDropdown;
